Class on 3.1.10 Layout with Box Model and Float

Update: here are some files we worked on in class:
[zip file] class_3110.zip

Today we are going to mostly talk about the basics of layout using the box model and the float property.

First we are going to look at a general way to approach the transition from conceptual design to the actual HTML/CSS. We will use this link here:

Then we will go into the box model and floats. If time permits we will wrap it up with an overall look at the web design process so far.

The Box Model

This is part of what is covered in chapter 8 in the book. It’s on pages 162 - 179. We will use the following files to help illustrate the ideas:

[zip file] box_model_files.zip

Chapter 8 is one of the chapters they include in the free sample chapters you can get from the book’s site http://www.sitepoint.com/books/css2/samplechapters.php

The reason I’m jumping into chapter 8 instead of starting in the middle is that I thinkit is confusing how the book organizes the box model information. Chapter 8 is really about doing layout. At the start of the chapter it shows some of the HTML and other ideas about the example page that will be laid out.

Then it jumps to talking about thethe box model and shows examples that aren’t related to the layout example directly. Then they jump back into doing the layout. So, what we’re doing is to talk about the box model first and then go into the layout example in chapter 8.

We will look at pages 162—179 in the book and use the files attached in the blog post. We will also look at these sites:

http://www.yourhtmlsource.com/stylesheets/cssspacing.html

http://www.redmelon.net/tstme/box_model/

http://www.addedbytes.com/css/box-model/

IE and the box model (we won’t really worry about this until after the midterm)
http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

Float

First download this file and open it up in Dreamweaver so we can take a look at it and begin styling it. Also create an external stylesheet to add styles to the page.
[html file] index_basic.html

We’ll take a look at this link quickly:http://www.maxdesign.com.au/articles/process/

and then take a look at this link http://www.smashingmagazine.com/

Then: make a blank CSS file and attach it to the HTML file.

Here are the basic rules/facts/issues you should learn about Floats:

  1. You can only float Block level elements (see why I wanted you to memorize that stuff).
  2. When you float something your float it to either the left or right side of the page. 
    #content{
    float:left;
}
#sidebar{
    float:right;
}
  3. you need to specify the width of an item if you are going to float it. 
    #content{
    float:left;
    width:600px;
}
  4. Once you float an element all of the block elements after it will also be floated until you give one of them a clear property. 
    #content{
    float:left;
    width:600px;
}
#sidebar{
    float:right;
}
#footer{
    clear:right; /*you can also clear:left or if floated both ways clear:both */;
}